<template>
	<hea-der></hea-der>
	<div ref="slidable" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
		<router-view class="apppading" />
	</div>
	<foo-ter></foo-ter>
</template>
<script>
	import HeaDer from './components/header'
	import FooTer from './components/footer'
	export default {
		data() {
			return {}
		},
		components: {
			HeaDer,
			FooTer,
		},
		methods: {
			onTouchStart(event) {
				// 记录初始触摸位置
				this.startX = event.touches[0].clientX
			},
			onTouchMove(event) {
				// 计算滑动距离
				this.currentX = event.touches[0].clientX
				this.deltaX = this.currentX - this.startX
			},
			onTouchEnd() {
				// 设置滑动阈值（根据实际情况调整）
				const threshold = 240

				if (this.deltaX > threshold) {
					// 向右滑动，执行返回上一页操作
					this.goBack()
				}

				// 重置滑动参数
				this.startX = null
				this.currentX = null
				this.deltaX = 0
			},
			goBack() {
				// 在这里执行返回上一页的逻辑，可以使用 Vue Router 或其他路由管理器
				this.$router.go(-1) // 使用 Vue Router 返回上一页
			},
		},
		mounted() {},
	}
</script>
<style>
	header a.router-link-exact-active {
		color: #52e29f;
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.apppading {
			padding-bottom: 0.45rem;
		}
	}
</style>
